<template>
  <div class="modify">
    <van-nav-bar title="收货地址" left-arrow @click-left="onClickLeft" />

    <div class="write">
      <div class="who">
        联系人<input type="text" placeholder="姓名" v-model="who" />
      </div>
      <div class="sex">
        <span class="boy">先生</span><span class="girl">女士</span>
      </div>
      <div class="who">电话<input type="text" placeholder="手机号码" v-model="phone"/></div>
      <div class="who">
        地址<input type="text" placeholder="选择收货地址" v-model="address"/>
      </div>
      <div class="bu">
        补充说明 <input type="text" placeholder="输入补充说明" class="buone" />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return{
        who:this.$store.state.save.name,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.write {
  width: 100%;
  height: 300px;
}
.who {
  width: 95%;
  margin: auto;
  height: 30px;
  font-size: 18px;
  margin-top: 20px;
  border-bottom: 1px solid #eee;
}
input {
  width: 70%;
  margin-left: 30px;
  border: none;
  color: #e0e0e0;
  font-size: 14px;
}
.sex {
  width: 250px;
  height: 30px;
  margin-left: 100px;
  margin-top: 30px;
}
.boy {
  display: inline-block;
  width: 100px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border: 1px solid #eee;
  margin-bottom: 10px;
}
.girl {
  display: inline-block;
  width: 100px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border: 1px solid #eee;
  margin-left: 20px;
  margin-bottom: 10px;
}
.girl:hover {
  background-color: lightblue;
}
.boy:hover {
  background-color: lightblue;
}
.bu {
  width: 95%;
  height: 100px;
  margin: 20px auto;
}
.buone {
  /* border-bottom: 1px solid #000; */
  margin-left: 20px;
  width: 200px;
  height: 50px;
}
</style>